// 创建仓库实例并暴露
import { createStore } from "vuex";
// import { INCREMENT } from "./mutationsTypes";

const store = createStore({
  // state表示的就是仓库数据
  state() {
    return {
      count: 3,
      name: "pengshao",
      age: 20,
      sex: 1,
      arr: [1, 2, 3, 4, 5, 6, 7],
    };
  },
  // 可以理解为getters就是vuex里面的计算属性
  getters: {
    // oddArr: (state) => (n) => {
    //   return state.arr.filter((item) => item % 2).slice(0, n);
    // },
    oddArr(state) {
      return state.arr.filter((item) => item % 2);
    },
  },
  // mutations里面是写函数的，mutations是唯一可以改变state的地方
  mutations: {
    // mutations可以接收一个参数是state
    // 还可以接收第二个参数是payload(载荷，传参)
    // 载荷在传递的时候，尽可能地传递对象

    // mutations必须是同步函数
    // 开发者工具上面的记录是在mutations函数执行的时候产生的，而不是在数据改变的时候产生
    // 如果出现了异步，需要使用actions来解决
    increment(state, payload) {
      state.count += payload.a;
    },
  },
  // actions也是写函数的，它是不能改变仓库数据
  // 这里能做的就是去触发mutations函数
  // 这里可以写异步
  actions: {
    // context表示上下文
    asyncIncrement({ commit }, payload) {
      // payload {a: 8}
      // console.log(context);
      setTimeout(() => {
        commit("increment", payload);
      }, 2000);
    },
  },
});

export default store;
